<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form
          :model="requestParameters"
          :inline="true"
          ref="requestParameters"
        >
          <el-form-item label="关键字">
            <el-input
              v-model="requestParameters.keyword"
              placeholder="根据编号搜索"
              style="width: 250px;"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clearSearch">清除</el-button>
            <el-button size="small" type="primary" @click="searchRandom"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="编号">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题型">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题目编号">
            <template slot-scope="scope">
              <el-button
                type="text"
                v-for="(item, index) in scope.row.questionIDs"
                :key="index"
                @click="showPreview(item.id)"
                >{{ item.number }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="scope">
              <span>{{ scope.row.addTime }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="答题时间(s)">
            <template slot-scope="scope">
              <span>{{ scope.row.totalSeconds }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="正确率(%)">
            <template slot-scope="scope">
              <span>{{ scope.row.accuracyRate }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteRandom(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 预览弹框 -->
        <questions-preview
          ref="previewDialog"
          :previewData="previewData"
        ></questions-preview>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import questionsPreview from '../components/preview.vue'

export default {
  name: 'QuestionsRandom',
  components: { questionsPreview },
  data() {
    return {
      tableKey: 0,
      dataList: [], //数据列表
      listLoading: false,
      alertText: '',
      total: 0,
      requestParameters: {
        page: 1, // 当前页数
        pagesize: 10,
        keyword: ''
      },
      previewData: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.listLoading = true
      const { data: res } = await randoms(this.requestParameters)
      // 获取数据给dataList
      console.log(res)
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `数据一共 ${this.total} 条`
      this.listLoading = false
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      this.getList()
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 搜索信息
    searchRandom() {
      this.requestParameters.page = 1
      this.getList(this.requestParameters)
    },
    // 清空输入框
    clearSearch() {
      this.requestParameters.keyword = ''
    },
    // 删除选中tabel的一行
    async deleteRandom(data) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }
      await removeRandoms(data)
      this.getList()
    },
    // 展示预览弹框
    showPreview(id) {
      this.$refs.previewDialog.showDialog()
      // 展示弹框的同时渲染弹框
      this.getDetailes(id)
    },
    async getDetailes(id) {
      const { data: res } = await detail({id:id})
      console.log(res)
      this.previewData = res
    }
  }
}
</script>

<style scoped lang="less">
.el-form {
  padding-left: 30px;
  display: flex;
  justify-content: space-between;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>
